<template>
  <el-dialog
    title="分配用户"
    :visible="visible"
    width="50%"
    @close="onDialogClose"
  >
    <p>当前的用户：{{ userData.username }}</p>
    <p>当前的角色：{{ userData.role_name }}</p>
    <!-- 绑定的form表单数据 -->
    <el-form ref="distributeRolesForm" :model="distributeRolesForm" label-width="86px">
      <el-form-item label="分配新角色:" prop="rid">
        <el-select v-model="distributeRolesForm.rid" placeholder="请选择">
          <el-option
            v-for="item in rolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onDialogClose">取 消</el-button>
      <el-button type="primary" @click="onDistribute">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { distributeRolesById } from '@/api/user'
export default {
  model: {
    prop: 'visible'
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    rolesList: {
      type: Array,
      required: true
    },
    userData: {
      type: Object,
      required: true

    }
  },
  data() {
    return {
      distributeRolesForm: {
        rid: ''
      }
      // distributeRolesFormRules: {
      //   rid: [{ required: true, message: '不能为空！', trigger: 'blur' }]
      // }
    }
  },
  created() {

  },

  methods: {
    // 对话框关闭，表单重置
    onDialogClose() {
      this.$emit('input', false)
      this.$refs.distributeRolesForm.resetFields()
    },
    // 点击确认发送请求
    async onDistribute() {
      try {
        // 发送请求编辑用户信息
        await distributeRolesById(this.userData.id, this.distributeRolesForm)
        this.$message.success('角色设置成功！')
        this.$emit('success')
        this.onDialogClose()
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.el-form-item__label{
  text-align: left;
}
</style>
